<template>
  <div class="container">
    <statistics-header header-title="确 诊 和 无 症 状 人 员 数 据 库"></statistics-header>
    <statistics-bar  @getType="getType" bar-type="confirmedAsymptomatic" ref="statisticsBar"></statistics-bar>
    <div class="report-content">
      <div class="search-group">
        <div class="left-content">
          <div class="data-title">数据库信息</div>
          <dlq-search @search="search" search-more="searchMore" :area-name="areaName" :typea="typea"></dlq-search>
        </div>
        <!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
      </div>
      <Row class="main-table">
        <vxe-toolbar export custom></vxe-toolbar>
        <vxe-table
          height="1000"
          border
          resizable
          show-overflow
          keep-source
          ref="xTable"
          :loading="loading"
          :data="tableData"
          :edit-config="{trigger: 'manual', mode: 'row'}">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="姓名" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="nationality" title="所属国籍" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="province" title="所属省" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="city" title="所属市" :edit-render="{name: '$input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="county" title="所属区县"  :edit-render="{name: '$select', options: qu}"></vxe-table-column>
          <vxe-table-column field="pop_type" title="人群分类" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="case_type" title="病例分类" :edit-render="{name: '$select', options: blfenle}"></vxe-table-column>
          <vxe-table-column field="onset_day" title="发病日期" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
          <vxe-table-column field="diagnostic_time" title="诊断时间" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
          <vxe-table-column field="admitted_hospital" title="收治医院" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="admission_time" title="入院时间" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
          <vxe-table-column field="clinical_severity" title="临床严重程度" :edit-render="{name: '$select', options: linchuangyz}"></vxe-table-column>
          <vxe-table-column field="Input_case" title="是否输入病例" :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
          <vxe-table-column field="before_entry" title="入境前居住或旅行的国家或地区" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="cure_date" title="治愈出院日期" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
          <vxe-table-column field="Isolation_release_date" title="解除隔离日期" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
          <vxe-table-column title="操作" width="180">
            <template v-slot="{ row }">
              <template v-if="$refs.xTable.isActiveByRow(row)">
                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
              </template>
              <template v-else>
                <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </Row>
      <br>
      <Row type="flex" justify="center">
        <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
              @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
      </Row>
    </div>
  </div>
</template>
<script>
import {
  asymptomaticList,
  updateqzry,
  insetgequ
} from '@/api/statistics-data-list'
import StatisticsBar from '@/components/statistics-bar'
import StatisticsHeader from '@/components/statistics-header'
import DlqSearch from '@/components/search'
import areaJSON from '@/libs/area'
// import areaJSON from '@/libs/area'
export default {
  components: { StatisticsHeader, StatisticsBar, DlqSearch },
  data () {
    return {
      typea: '0',
      blfenle: [
        {
          value: '阳性检测',
          label: '阳性检测'
        },
        {
          value: '确诊病例',
          label: '确诊病例'
        }
      ],
      linchuangyz: [
        {
          value: '无症状感染者',
          label: '无症状感染者'
        },
        {
          value: '普通型',
          label: '普通型'
        },
        {
          value: '重型',
          label: '重型'
        }
      ],
      qu: [],
      areaLista: areaJSON,
      sexList: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ],
      case_type: [],
      clinical_severity: [],
      drawer: false,
      areaName: '',
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 15,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'Id_no',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '护照号',
          key: 'passport_no',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '性别',
          key: 'sex',
          tooltip: true,
          width: 70,
          align: 'center',
          visible: false
        },
        // {
        //   title: '工作单位',
        //   key: 'work_unit',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '手机号码',
          key: 'tel',
          tooltip: true,
          width: 160,
          align: 'center',
          visible: false
        },
        {
          title: '所属国籍',
          key: 'nationality',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '所属省',
          key: 'province',
          tooltip: true,
          width: 160,
          align: 'center'
        },
        {
          title: '所属市',
          key: 'city',
          tooltip: true,
          width: 160,
          align: 'center'
        },
        {
          title: '所属区县',
          key: 'county',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '人群分类',
          key: 'pop_type',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '病例分类',
          key: 'case_type',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '发病日期',
          key: 'onset_day',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '诊断时间',
          key: 'diagnostic_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '收治医院',
          key: 'admitted_hospital',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '入院时间',
          key: 'admission_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '临床严重程度',
          key: 'clinical_severity',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '是否输入病例',
          key: 'Input_case',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '入境前居住或旅行的国家或地区',
          key: 'before_entry',
          tooltip: true,
          width: 260,
          align: 'center'
        },
        {
          title: '治愈出院日期',
          key: 'cure_date',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '解除隔离日期',
          key: 'Isolation_release_date',
          tooltip: true,
          width: 200,
          align: 'center'
        }
      ],
      tableData: [],
      areaList: [
        {
          'name': '集中隔离',
          'id': '集中隔离'
        },
        {
          'name': '居家隔离',
          'id': '居家隔离'
        },
        {
          'name': '企业隔离',
          'id': '企业隔离'
        }
      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      typeName: '',
      county: '',
      keyName: ''
    }
  },
  computed: {},
  mounted () {
    // this.init()
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.confirmedAsymptomaticAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.typeName = this.$route.query.type
      this.init()
    } else {
      this.init()
    }
  },
  methods: {
    drawerSearch () {
      console.log(this.case_type)
      this.init({ case_type: this.case_type.toString(), clinical_severity: this.clinical_severity.toString() })
    },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.confirmedAsymptomaticAction(value.county)
      if (value.county === '全市') {
        this.county = ''
      } else {
        this.county = value.county
        this.keyName = value.key
      }
      this.init()
      if (value.searchMore === 'searchMore') {
        console.log('1111')
        this.drawer = true
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      if (this.county)obj.county = this.county
      if (this.keyName)obj.key = this.keyName
      if (this.typeName)obj.type = this.typeName
      this.tableLoading = true
      asymptomaticList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
            data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    getType (object) {
      this.typeName = object.type
      this.pageObj.pageNo = 1
      this.init()
    },
    /* findSexList () {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      asymptomaticList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          /!* this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord *!/
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    }, */
    editRowEvent (row) {
      this.$refs.xTable.setActiveRow(row)
      console.log(row, '编辑')
      this.areaLista.push({ name: '市本级' })
      for (let i = 0; i < this.areaLista.length; i++) {
        this.qu.push({ value: this.areaLista[i].name, label: this.areaLista[i].name })
      }
    },
    saveRowEvent (row) {
      this.$refs.xTable.clearActived().then(() => {
        console.log(row.name, 'name')
        console.log(row, '修改数据')
        updateqzry(row).then(ret => {
          if (ret.data.errmsg === 'success') {
            this.loading = false
            this.$refs.xTable.clearActived().then(() => {
              this.$XModal.message({ message: '保存成功！', status: 'success' })
            })
            let a = { type: '确诊和无症状 ', classification: '1', address: 'http://124.95.133.9:80/api/us/yiqing/yqwlryinfo/insetgequ' }
            insetgequ(a).then(res => {

            })
          }
        })
      })
    },
    cancelRowEvent (row) {
      const xTable = this.$refs.xTable
      xTable.clearActived().then(() => {
        // 还原行数据
        xTable.revertData(row)
      })
    }
  }
}
</script>

<style scoped type="less">
  .container {
    margin-bottom: 50px;
  }
  .report-content {
    padding: 0 10px;
    height: auto;
  }
  .search-group {
    /*padding: 10px 0;*/
    border-bottom: 1px solid #efefef;
  }
  .sub-title {
    /*border-left: 7px solid darkred;*/
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
  }
  .sub-title span {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 3px;
  }
  .precent-group {
    display: flex;
    align-items: center;
  }
  .precent-group>.item {
    width: 180px;
    padding: 0 10px;
  }
  .precent-group>.item>.text {
    width: 100%;
  }
  .demo-drawer-footer {
    margin-top: 20px;
  }
  .inner-frame>.ivu-row {
    margin-bottom: 10px;
  }
  .ivu-form-item{
    margin-bottom: 10px;
  }
  .main-table {
    margin-top: -45px;
  }
  .data-title {
    border-left: 6px solid darkred;
    padding-left: 7px;
    margin-right: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  .search-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }
  .left-content {
    display: flex;
    align-items: center;
    z-index: 2;
  }
  .record-num {
    margin-right: 140px;
  }
  .ivu-checkbox-border{
    margin-bottom: 10px;
  }
</style>
